<template>
  <div>
    <van-nav-bar title="取消接单" left-text="返回" left-arrow @click-left="onClickLeft" />
    <h3 style="text-align:center;margin:25px;">请选你取消订单的原因：</h3>
    <van-radio-group v-model="radio">
      <van-cell-group>
        <van-cell title="客人位置远" clickable @click="radio = '1'">
          <template #right-icon>
            <van-radio name="1" />
          </template>
        </van-cell>
        <van-cell title="情况变了" clickable @click="radio = '2'">
          <template #right-icon>
            <van-radio name="2" />
          </template>
        </van-cell>
        <van-cell title="下次吧" clickable @click="radio = '3'">
          <template #right-icon>
            <van-radio name="3" />
          </template>
        </van-cell>
        <van-cell title="弄错了" clickable @click="radio = '4'">
          <template #right-icon>
            <van-radio name="4" />
          </template>
        </van-cell>
        <van-cell title="太无聊，玩一玩的..." clickable @click="radio = '5'">
          <template #right-icon>
            <van-radio name="5" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <van-field
      v-model="message"
      rows="2"
      autosize
      label="留言"
      type="textarea"
      maxlength="100"
      placeholder="请输入留言"
      show-word-limit
      style="height:150px"
    />
    <van-button @click="tijao" type="primary" size="large">提交</van-button>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      radio: "1",
      message: ""
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    tijao() {
      if (this.message.trim() === "") {
        Toast.fail("写点东西吧");
        this.message = "";
      } else {
        Toast.success("取消成功");
        this.$router.push("/home");
      }
    }
  }
};
</script>

<style>
</style>